<template>
  <div class="commerce-order-info">
    <Title title="订单信息" style="margin-bottom: 16px;"/>
    <el-row :class="{'dividing': !showMobilePage}" class="detail-row" >
      <el-form label-position="right" label-width="136px">
        <el-col :span="8">
          <el-form-item label="订单编号：">
            <span>{{ detailData.orderNum || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号(第三方)：">
            <span>{{ detailData.orderNumThirdParty || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态：">
            <span>{{ detailData.orderStatus | commerceOrderStatus }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题：">
            <ToolTip :content="detailData.title" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单渠道：">
            <span>{{ detailData.orderChannel | commerceOrderType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="价格(元)：">
            <PriceColumn :real-val="detailData.price" :price="detailData.price / 100" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本(元)：">
            <PriceColumn :real-val="detailData.cost" :price="detailData.cost / 100" />
          </el-form-item>
        </el-col>
        <el-col v-if="!detailData.orderChannel" :span="8">
          <el-form-item label="含快递(元)：">
            <PriceColumn :real-val="detailData.express" :price="detailData.express / 100" />
          </el-form-item>
        </el-col>
        <el-col v-if="!detailData.orderChannel" :span="8">
          <el-form-item label="SKU编码：">
            <ToolTip :content="detailData.goodsCoding" />
          </el-form-item>
        </el-col>
        <el-col v-if="!detailData.orderChannel" :span="8">
          <el-form-item label="商品属性：">
            <ToolTip :content="detailData.goodsAttribute" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="IP形象：">
            <ToolTip :content="detailData.ipInfo" />
          </el-form-item>
        </el-col>
        <el-col v-if="!detailData.orderChannel" :span="8">
          <el-form-item label="仓库：">
            <span>{{ detailData.warehouse || '--' }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="出库状态：">
            <span>{{ detailData.deliveryStatus | orderDeliveryStatus }}</span>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="客户名称：">
            <!-- <span>{{ detailData.clientName || '--' }}</span> -->
            <ToolTip :content="detailData.clientName" />
          </el-form-item>
        </el-col>
        <el-col v-if="detailData.orderChannel" :span="8">
          <el-form-item label="客户类型：">
            <span>{{ detailData.clientType | clientStatus }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            <span>{{ detailData.creator || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款时间：">
            <span>{{ detailData.payTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单创建时间：">
            <span>{{ detailData.orderCreateTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            <span>{{ detailData.createTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="!detailData.orderChannel" :span="8">
          <el-form-item label="更新时间：">
            <span>{{ detailData.updateTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售：">
            <span>{{ detailData.market || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注：">
            <ToolTip :content="detailData.remark" />
          </el-form-item>
        </el-col>
        <el-col v-if="detailData.orderChannel" :span="8">
          <el-form-item label="附件：">
            <FileShowList :file-list="detailData.attachment" is-show-single-file />
          </el-form-item>
        </el-col>
        <el-col v-if="detailData.orderChannel" :span="8">
          <el-form-item label="来源平台：">
            <ToolTip :content="detailData.platform" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发货时间(实际)：">
            <span>{{ detailData.actualTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发货时间(系统)：">
            <span>{{ detailData.systemTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="!detailData.orderChannel" :span="8">
          <el-form-item label="发货时间(淘宝)：">
            <span>{{ detailData.taobaoTime || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="!detailData.orderChannel" :span="8">
          <el-form-item />
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Title from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import { moneyFilter } from '@/filters/number';
import { commerceOrderStatus, commerceOrderType } from '@/filters/status';
import { mapState } from 'vuex';
import { format } from '@/filters/date';
export default {
  filters: {
    moneyFilter, format, commerceOrderStatus, commerceOrderType,
    orderDeliveryStatus(type) {
      const obj = {
        '0': '待出库',
        '1': '已出库',
        '-1': '库存不足'
      };
      return obj[String(type)] || '--';
    },
    clientStatus(type) {
      const obj = {
        '0': '公司',
        '1': '个人'
      };
      return obj[String(type)] || '--';
    }
  },
  components: {
    Title,
    FileShowList },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  }
};
</script>

<style lang="scss" scoped>
.commerce-order-info {
  .detail-row {
    .ip-style {
      width: 300px;
    }
    .sku-style {
      width: 200px;
    }
  }
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
.remark-container {
  word-break: break-all;
}
.dividing {
  &::v-deep {
    .el-col {
      .el-form-item__content {
        border-right: 1px solid #EBEEFD !important;
      }
      &:nth-child(3n) {
        .el-form-item__content {
          border-right: none !important;
        }
      }
      &:last-child {
        .el-form-item__content {
          border-right: none;
        }
      }
      .el-form-item {
        margin-right: 10px;
      }
    }
  }
}
</style>
